<template>
  <div>
    <!-- 头部 -->
    <Header title='JD商城 ~列表内容'>
      <template #left>
        <van-icon name="arrow-left" @click="tobackFn" />
      </template>
    </Header>
    <div class="infoBox">
      <p class="img"> <img :src="goodsInfo.img1" alt=""></p>
      <h3>￥ {{goodsInfo.originprice}} 元</h3>
      <p>{{goodsInfo.proname}}</p>

    </div>

    <!-- 底部 -->
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-action-bar-icon icon="cart-o" text="购物车"  @click="cart"/>
      <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
      <van-action-bar-button type="warning" text="加入购物车" @click="addcartFn"/>
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>

  </div>
</template>

<script setup lang="ts">
import { Dialog } from 'vant';
import { detailProidApi } from '@/api/goods'
import {cartAddApi} from '@/api/cart'
import router from '@/router';
import { onMounted, ref } from 'vue';
import type{MyMiaoSaItem}  from '@/config/interface'
import { useRoute, useRouter, type Router, type RouteLocationNormalizedLoaded } from 'vue-router';
const $route: RouteLocationNormalizedLoaded = useRoute()
const $router: Router = useRouter()
//返回上一页
const tobackFn = () => {
  router.go(-1)
}

//验证是否存在proid
const testProid = () => {
  const proid = $route.query.proid
  if (!proid) {

    Dialog.alert({
      message: '您访问的商品不存在',
    }).then(() => {

      $router.back()
    });

    console.log(111, proid);
  }
}
//准备一个商品渲染的数组
const goodsInfo = ref<MyMiaoSaItem>({} as MyMiaoSaItem)

//请求商品详细信息展示
const getDoodsInfo = async () => {
  const res = await detailProidApi($route.query.proid as string)
  goodsInfo.value = res.data
  // console.log(res, 12);
}
//加入购物车
const addcartFn = async()=>{
  console.log('加入购物车');

  // const res = await cartAddApi()
  // console.log(22,res);
  // if(res.code !==200){
  //   $router.back()
  // }
  
}
//路由跳转到购物车
const cart = ()=>{
  $router.push('/shoppingcart')
}

onMounted(() => {
  testProid()
  getDoodsInfo()

})
</script>
<style scoped lang="scss">
.infoBox{
  margin-top: 30px;
  width: 100%;
  padding: 0 15px;
  h3{
    color: rgb(206, 27, 27);
  }

  .img{
    width: 100%;
      height: 100%;
    margin: 0 auto;
    img{
      display: block;
      width: 100%;
      height: 100%;
      
    }
  }
}

</style>